<template>
    <div class="layout-table">

      <h2>编辑课程</h2>
      <div class="layout-table-button">
        <el-button type="primary" @click="toPath('CourseList')">返回课程列表</el-button>
      </div>

      <div class="content">

        <el-form :model="course" :rules="rules" ref="course" label-width="100px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="资料分类" prop="categoryId">
                <el-cascader v-model="course.categoryId" :options="datacategoryList" clearable></el-cascader>
              </el-form-item>
            </el-col>
          </el-row>


          <el-row>
            <el-col :span="12">
              <el-form-item label="课程名称" prop="name">
                <el-input v-model="course.name"></el-input>
              </el-form-item>
            </el-col>
          </el-row>


          <el-row>
            <el-col :span="12">
              <el-form-item label="排序" prop="sort">
                <el-input v-model="course.sort"></el-input>
              </el-form-item>
            </el-col>
          </el-row>


          <el-row>
            <el-col :span="12">
              <el-form-item label="课程图片" prop="icon">
                  <el-upload ref="upload"
                             :limit="1"
                  :auto-upload="true"
                  drag
                  :http-request="fileUpload"
                  :before-remove = "removeUrl"
                  action="customize">
                  <i class="el-icon-upload"></i>
                    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                    <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
                  </el-upload>
                <el-input v-model="course.icon"></el-input>
              </el-form-item>
            </el-col>
          </el-row>


          <el-row style="text-align:center;margin:20px 0;">
            <el-col :span="12">
              <el-button type="primary" @click="submitForm('ruleForm')"  :loading="loading">提交</el-button>
<!--              <el-button @click="resetForm('ruleForm')" style="margin-left:20px;">重置</el-button>-->
            </el-col>
          </el-row>

        </el-form>

      </div>

    </div>
</template>

<script>
import {getDatacategoryList,fileUpload,getCourseDetail,updateCourseDetail} from '@/api/api'

export default {
  name: "EditCourse",
  created() {

   this.course.id = this.$route.query.id

      let param = {
        ...this.course
      }

    // 查询课程信息
    getCourseDetail(param).then(res =>{
      if(res.code == 200){
        this.course = res.data
      }
    })

    getDatacategoryList().then(res =>{

      if(res.code == 200){
        let dataList = res.data;
        for (let i in dataList){
          let children = dataList[i].list;
          dataList[i]['value']= dataList[i].id
          dataList[i]['label']= dataList[i].categoryName
          dataList[i]['children']= children

          for (let c in dataList[i].children){
            dataList[i].children[c]['value']= dataList[i].children[c].id
            dataList[i].children[c]['label']= dataList[i].children[c].categoryName
          }
        }
        this.datacategoryList = dataList
      }

    })
  },
  data(){
    return {
      course: {
        id:'',
        name: '',
        icon: '',
        sort: '',
        categoryId: '',
        status: 0,
        isDeleted: 0
      },
      rules: {
        categoryId: [
          { required: true, message: '请选择资料分类', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '请输入课程名称', trigger: 'blur' }
        ],
        icon: [
          { required: true, message: '请选择课程图片', trigger: 'blur' }
        ],
        sort: [
          { required: true, message: '请输入排序', trigger: 'blur' }
        ]
      },
      datacategoryList:[],
      loading: false
    }
  },
  methods:{

    submitForm(){
      this.$refs.course.validate((valid) => {

        if (valid) {

          let param = {
            ...this.course
          }

          param.categoryId = param.categoryId[1]

          console.log("1")
          updateCourseDetail(param).then(res=>{
            if(res.code == 200){
              this.$message.success("修改成功 !!! ")
              this.$router.push({path:'/CourseList'})
            }else{
              this.$message.error("修改失败 !!! ")
            }
          })
        }
      });

    },
    resetForm(){
      this.$refs.course.resetFields()
    },
    toPath(value){
      this.$router.push({
        path:'/'+value
      })
    },
    fileUpload(params){

      const formData = new FormData();
      formData.append("file", params.file);

      fileUpload(formData).then( res =>{
        if (res.code == 200){
          this.course.icon = res.data.fileUrl
        }
      })
    },
    removeUrl(){
      this.course.icon = ''
    }
  }
}
</script>

<style>

.layout-table{
  margin: 30px 0 0 200px;
  width: 1800px;
}

</style>